<template>
  <div class="fee-info">
    <div class="fee-info-header">
      <span>费用</span>
      <div class="fee-note">
        <img class="fee-note-icon" :src="getPaymentIcon()" alt="payment-type" />
        <span :class="getPaymentTextClass()">
          {{ getPaymentText() }}
        </span>
      </div>
    </div>

    <!-- 押金部分 -->
    <div class="fee-section">
      <div class="fee-item" @click="toggleDeposit">
        <div class="fee-label">
          <span>押金</span>
          <span class="fee-amount">¥{{ orderData.deposit || "0.00" }}</span>
          <span class="detail-link" @click="showDepositDetailDialog = true">
            明细
            <base-icon name="iconfont ic-xiajiantou1" :size="12" />
          </span>
        </div>
        <div class="arrow-icon" :class="{ expanded: depositExpanded }">
          <base-icon name="iconfont ic-zuojiantou" :size="12" />
        </div>
      </div>

      <!-- 押金详情 -->
      <div class="fee-details" v-show="depositExpanded">
        <div v-for="item in getDepositDetails()" :key="item.label" class="fee-detail-item">
          <span class="label">{{ item.label }}：</span>
          <span class="value" :class="{ success: item.isSuccess }">
            {{ item.value }}
          </span>
        </div>
      </div>
    </div>

    <!-- 租金部分 -->
    <div class="fee-section">
      <div class="fee-item" @click="toggleRent">
        <div class="fee-label">
          <span>租金</span>
          <span class="fee-amount">¥{{ orderData.rent || "0.00" }}</span>
        </div>

        <div class="arrow-icon" :class="{ expanded: rentExpanded }">
          <base-icon name="iconfont ic-zuojiantou" :size="12" />
        </div>
      </div>

      <div class="rent-details" v-show="rentExpanded">
        <div v-for="item in getRentDetails()" :key="item.label" class="fee-detail-item">
          <span class="label">{{ item.label }}：</span>
          <span class="value">{{ item.value }}</span>
          <span v-if="item.hasButton" class="rent-plan-link" @click="handleRentPlanClick">
            租金计划
            <base-icon name="iconfont ic-xiajiantou1" :size="12" />
          </span>
        </div>
      </div>
    </div>

    <!-- 增值服务部分 -->
    <div class="fee-section">
      <div class="fee-item" @click="toggleService">
        <div class="fee-label">
          <span>增值服务</span>
          <span class="fee-amount">¥{{ orderData.valueAddedService || "0.00" }}</span>
        </div>

        <div class="arrow-icon" :class="{ expanded: serviceExpanded }">
          <base-icon name="iconfont ic-zuojiantou" :size="12" />
        </div>
      </div>

      <div class="service-details" v-show="serviceExpanded">
        <div v-for="item in getServiceDetails()" :key="item.label" class="fee-detail-item">
          <span class="label">{{ item.label }}：</span>
          <span class="value">¥{{ item.value }}</span>
        </div>
      </div>
    </div>
    <!-- 押金明细弹窗 -->
    <base-dialog
      v-model="showDepositDetailDialog"
      title="押金明细"
      width="80%"
      :show-footer="false"
      @cancel="handleCloseDepositDetail"
    >
      <div class="deposit-detail-content">
        <!-- 芝麻额度冻结 -->
        <div class="detail-section">
          <div class="section-title">芝麻额度冻结</div>
          <el-table :data="zhimaFreezeData" style="width: 100%" size="small">
            <el-table-column
              v-for="column in zhimaFreezeColumns"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
            />
          </el-table>
        </div>

        <!-- 押金支付 -->
        <div class="detail-section">
          <div class="section-title">押金支付</div>
          <el-table :data="depositPaymentData" style="width: 100%" size="small">
            <el-table-column
              v-for="column in depositPaymentColumns"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
            >
              <template #header>
                <div v-if="column.showButton" class="header-with-button">
                  <span>{{ column.label }}</span>
                  <el-tooltip
                    :content="getColumnTooltip(column.prop)"
                    placement="top"
                    effect="dark"
                    popper-class="custom-tooltip"
                  >
                    <base-icon name="iconfont ic-wenhaobangzhu" :size="14" color="var(--ct4)" />
                  </el-tooltip>
                </div>
                <span v-else>{{ column.label }}</span>
              </template>
              <template #default="{ row }">
                <span>{{ row[column.prop] }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>

        <!-- 修改记录 -->
        <div class="detail-section">
          <div class="section-title">修改记录</div>
          <el-table :data="modificationRecordData" style="width: 100%" size="small">
            <el-table-column
              v-for="column in modificationRecordColumns"
              :key="column.prop"
              :prop="column.prop"
              :label="column.label"
            />
          </el-table>
        </div>
      </div>
    </base-dialog>
  </div>
</template>

<script setup>
  import { ref } from "vue";

  const props = defineProps({
    orderData: {
      type: Object,
      required: false,
      default: () => ({}),
    },
  });

  // 展开状态控制
  const depositExpanded = ref(false);
  const rentExpanded = ref(false);
  const serviceExpanded = ref(false);

  // 押金明细弹窗状态
  const showDepositDetailDialog = ref(false);

  // 切换展开状态
  const toggleDeposit = () => {
    depositExpanded.value = !depositExpanded.value;
  };

  const toggleRent = () => {
    rentExpanded.value = !rentExpanded.value;
  };

  const toggleService = () => {
    serviceExpanded.value = !serviceExpanded.value;
  };

  // 处理租金计划点击
  const handleRentPlanClick = () => {
    console.log("查看租金计划详情");
    // 这里可以添加查看租金计划详情的逻辑
  };

  // 关闭押金明细弹窗
  const handleCloseDepositDetail = () => {
    showDepositDetailDialog.value = false;
  };

  // 获取列提示文字
  const getColumnTooltip = columnProp => {
    const tooltipMap = {
      referenceDeposit:
        "当【青云免押】配置开启后，下单时将自动根据当前商品价格及租期评估出商品的参考押金。未开启配置时默认为0",
      qingyunExemption:
        "当【青云免押】配置开启后，会根据用户的风控结果评估出系统为此用户减免的押金金额，未开启时统一为0",
      requiredDeposit:
        "根据【参考押金】金额减去,【青云免押】金额得出用户实际需要支付的押金总额，可通过\"修改押金\"操作，来调整用户实际需要支付的押金总额",
    };

    return tooltipMap[columnProp] || "暂无说明";
  };

  // 获取支付类型图标
  const getPaymentIcon = () => {
    return props.orderData.isZhima ? "src/assets/order/zmmy.png" : "src/assets/order/qymy.png";
  };

  // 获取支付类型文字
  const getPaymentText = () => {
    return props.orderData.isZhima ? "芝麻免押" : "押金支付";
  };

  // 获取支付类型文字样式类
  const getPaymentTextClass = () => {
    return props.orderData.isZhima ? "zhima-text" : "deposit-text";
  };

  // 获取押金详情数据
  const getDepositDetails = () => {
    if (props.orderData.isZhima) {
      // 芝麻免押
      return [
        { label: "冻结额度", value: `¥${props.orderData.frozenAmount || "0.00"}` },
        { label: "信用减免", value: `¥${props.orderData.creditReduction || "0.00"}` },
        { label: "实付押金", value: `¥${props.orderData.actualDeposit || "0.00"}` },
        { label: "冻结状态", value: "成功", isSuccess: true },
      ];
    } else {
      // 押金支付
      return [
        { label: "参考押金", value: `¥${props.orderData.referenceDeposit || "0.00"}` },
        { label: "青云免押", value: `¥${props.orderData.qingyunReduction || "0.00"}` },
        { label: "需支付押金", value: `¥${props.orderData.requiredDeposit || "0.00"}` },
        { label: "已支付押金", value: `¥${props.orderData.paidDeposit || "0.00"}` },
      ];
    }
  };

  // 获取租金详情数据
  const getRentDetails = () => {
    return [
      { label: "总租金", value: `¥${props.orderData.totalRent || "235266.00"}` },
      { label: "首期租金", value: `¥${props.orderData.firstRent || "1216.00"} (含增值服务费)` },
      { label: "滞纳金", value: `¥${props.orderData.lateFee || "1312.00"}` },
      { label: "优惠金额", value: `¥${props.orderData.discountAmount || "1312.00"}` },
      { label: "期数", value: `${props.orderData.periods || "12"}期`, hasButton: true },
    ];
  };

  // 获取增值服务详情数据
  const getServiceDetails = () => {
    return [
      { label: "碎屏服务", value: `¥${props.orderData.screenProtection || "0.00"}` },
      { label: "2年质保", value: `¥${props.orderData.extendedWarranty || "0.00"}` },
      { label: "保险", value: `¥${props.orderData.insurance || "0.00"}` },
    ];
  };

  // 芝麻额度冻结列配置
  const zhimaFreezeColumns = ref([
    { prop: "frozenAmount", label: "冻结额度" },
    { prop: "creditReduction", label: "信用减免" },
    { prop: "actualFreeze", label: "实际冻结" },
    { prop: "freezeStatus", label: "冻结状态" },
    { prop: "freezeTime", label: "冻结时间" },
    { prop: "unfreezeAmount", label: "解冻额度" },
    { prop: "unfreezeTime", label: "解冻时间" },
    { prop: "unfreezeRemarks", label: "解冻备注" },
    { prop: "remarks", label: "备注" },
  ]);

  // 芝麻额度冻结数据（多行极限情况）
  const zhimaFreezeData = ref([
    {
      frozenAmount: "0",
      creditReduction: "0",
      actualFreeze: "0",
      freezeStatus: "-",
      freezeTime: "2025-09-22 16:28:09",
      unfreezeAmount: "0",
      unfreezeTime: "2025-09-22 16:28:09",
      unfreezeRemarks: "-",
      remarks: "-",
    },
    {
      frozenAmount: "5000.00",
      creditReduction: "4800.00",
      actualFreeze: "200.00",
      freezeStatus: "成功",
      freezeTime: "2025-09-21 14:30:15",
      unfreezeAmount: "0",
      unfreezeTime: "-",
      unfreezeRemarks: "-",
      remarks: "首次冻结",
    },
    {
      frozenAmount: "8000.00",
      creditReduction: "7500.00",
      actualFreeze: "500.00",
      freezeStatus: "成功",
      freezeTime: "2025-09-20 10:15:30",
      unfreezeAmount: "500.00",
      unfreezeTime: "2025-09-20 18:45:20",
      unfreezeRemarks: "用户申请解冻",
      remarks: "部分解冻",
    },
    {
      frozenAmount: "12000.00",
      creditReduction: "11500.00",
      actualFreeze: "500.00",
      freezeStatus: "失败",
      freezeTime: "2025-09-19 09:20:45",
      unfreezeAmount: "0",
      unfreezeTime: "-",
      unfreezeRemarks: "-",
      remarks: "信用额度不足",
    },
    {
      frozenAmount: "15000.00",
      creditReduction: "14400.00",
      actualFreeze: "600.00",
      freezeStatus: "成功",
      freezeTime: "2025-09-18 16:45:10",
      unfreezeAmount: "600.00",
      unfreezeTime: "2025-09-19 08:30:25",
      unfreezeRemarks: "订单取消自动解冻",
      remarks: "自动解冻",
    },
  ]);

  // 押金支付列配置
  const depositPaymentColumns = ref([
    { prop: "referenceDeposit", label: "参考押金", showButton: true },
    { prop: "qingyunExemption", label: "青云免押", showButton: true },
    { prop: "requiredDeposit", label: "需支付押金", showButton: true },
    { prop: "paidDeposit", label: "已支付押金" },
    { prop: "refundedDeposit", label: "已退押金" },
    { prop: "paymentMethod", label: "支付方式" },
    { prop: "paymentTime", label: "支付时间" },
    { prop: "pendingDeposit", label: "待支付押金" },
    { prop: "remarks", label: "备注" },
  ]);

  // 押金支付数据（多行极限情况）
  const depositPaymentData = ref([
    {
      referenceDeposit: "2021.10",
      qingyunExemption: "727",
      requiredDeposit: "182.3",
      paidDeposit: "0",
      refundedDeposit: "0",
      paymentMethod: "代理支付",
      paymentTime: "2025-09-22 16:28:09",
      pendingDeposit: "183.2",
      remarks: "-",
    },
    {
      referenceDeposit: "3000.00",
      qingyunExemption: "2500.00",
      requiredDeposit: "500.00",
      paidDeposit: "500.00",
      refundedDeposit: "0",
      paymentMethod: "微信支付",
      paymentTime: "2025-09-21 15:30:20",
      pendingDeposit: "0",
      remarks: "已全额支付",
    },
    {
      referenceDeposit: "5000.00",
      qingyunExemption: "4000.00",
      requiredDeposit: "1000.00",
      paidDeposit: "800.00",
      refundedDeposit: "0",
      paymentMethod: "支付宝",
      paymentTime: "2025-09-20 11:45:30",
      pendingDeposit: "200.00",
      remarks: "部分支付",
    },
    {
      referenceDeposit: "8000.00",
      qingyunExemption: "7200.00",
      requiredDeposit: "800.00",
      paidDeposit: "800.00",
      refundedDeposit: "200.00",
      paymentMethod: "银行卡",
      paymentTime: "2025-09-19 14:20:15",
      pendingDeposit: "0",
      remarks: "已退款200元",
    },
    {
      referenceDeposit: "10000.00",
      qingyunExemption: "9000.00",
      requiredDeposit: "1000.00",
      paidDeposit: "0",
      refundedDeposit: "0",
      paymentMethod: "未支付",
      paymentTime: "-",
      pendingDeposit: "1000.00",
      remarks: "待支付",
    },
  ]);

  // 修改记录列配置
  const modificationRecordColumns = ref([
    { prop: "referenceDeposit", label: "参考押金" },
    { prop: "qingyunExemption", label: "青云免押" },
    { prop: "requiredDeposit", label: "需支付押金" },
    { prop: "modificationTime", label: "修改时间" },
    { prop: "modifier", label: "修改人" },
  ]);

  // 修改记录数据（多行极限情况）
  const modificationRecordData = ref([
    {
      referenceDeposit: "-",
      qingyunExemption: "-",
      requiredDeposit: "-",
      modificationTime: "2025-09-22 16:28:09",
      modifier: "-",
      modificationReason: "-",
      beforeValue: "-",
      afterValue: "-",
      remarks: "-",
    },
    {
      referenceDeposit: "3000.00",
      qingyunExemption: "2500.00",
      requiredDeposit: "500.00",
      modificationTime: "2025-09-21 10:15:30",
      modifier: "张三",
      modificationReason: "用户申请调整押金",
      beforeValue: "600.00",
      afterValue: "500.00",
      remarks: "用户信用良好，降低押金",
    },
    {
      referenceDeposit: "5000.00",
      qingyunExemption: "4500.00",
      requiredDeposit: "500.00",
      modificationTime: "2025-09-20 14:30:45",
      modifier: "李四",
      modificationReason: "系统自动调整",
      beforeValue: "800.00",
      afterValue: "500.00",
      remarks: "根据用户历史记录自动调整",
    },
    {
      referenceDeposit: "8000.00",
      qingyunExemption: "7200.00",
      requiredDeposit: "800.00",
      modificationTime: "2025-09-19 09:45:20",
      modifier: "王五",
      modificationReason: "客服手动调整",
      beforeValue: "1000.00",
      afterValue: "800.00",
      remarks: "用户投诉处理，降低押金要求",
    },
    {
      referenceDeposit: "10000.00",
      qingyunExemption: "9000.00",
      requiredDeposit: "1000.00",
      modificationTime: "2025-09-18 16:20:10",
      modifier: "赵六",
      modificationReason: "风控系统调整",
      beforeValue: "500.00",
      afterValue: "1000.00",
      remarks: "检测到风险，提高押金要求",
    },
  ]);
</script>

<style lang="scss" scoped>
  :deep(.base-dialog .el-dialog__footer) {
    padding: 12px 0 !important;
  }
  .arrow-icon {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--fl2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;

    &.expanded {
      transform: rotate(180deg);
    }
  }
  .fee-info {
    background: linear-gradient(180deg, #f4f3f6 0%, rgba(255, 255, 255, 0) 55.29%);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;

    .fee-info-header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 16px;
      color: var(--ct1);
      font-weight: 500;

      .fee-note {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 12px;
        color: var(--ct3);

        .fee-note-icon {
          width: 16px;
          height: 16px;
        }

        .zhima-text {
          font-weight: 500;
          color: #1777ff;
        }

        .deposit-text {
          font-weight: 500;
          color: var(--dr);
        }
      }
    }
    .fee-section {
      border-bottom: 1px dashed var(--cb1);
      padding-bottom: 8px;
      &:last-child {
        border-bottom: 0;
      }
    }

    .fee-item {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;

      .fee-label {
        display: flex;
        align-items: center;
        justify-content: baseline;

        span {
          font-size: 14px;
          color: var(--ct1);
          font-weight: 400;
        }

        .detail-link {
          font-size: 12px;
          color: var(--lk);
          cursor: pointer;

          &:hover {
            text-decoration: underline;
          }
        }

        .fee-amount {
          line-height: 22px;
          padding: 0 4px 0 8px;
          font-size: 14px;
          color: var(--ct1);
          font-weight: 500;
        }
      }
    }

    .fee-details,
    .rent-details,
    .service-details {
      margin-top: 4px;
      animation: slideDown 0.3s ease;
      display: flex;
      flex-direction: column;
      gap: 4px;
      .fee-detail-item {
        display: flex;
        align-items: center;
        font-size: 12px;
        .label {
          color: var(--ct3);
          margin-right: 4px;
        }

        .value {
          color: var(--ct1);
          font-weight: 500 !important;
        }

        .rent-plan-link {
          margin-left: 4px;
          font-size: 12px;
          color: var(--lk);
          cursor: pointer;
          display: flex;
          align-items: center;
          gap: 4px;
        }
      }
    }

    @keyframes slideDown {
      from {
        opacity: 0;
        transform: translateY(-10px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
  }

  // 押金明细弹窗样式
  .deposit-detail-content {
    .detail-section {
      margin-bottom: 16px;

      &:last-child {
        margin-bottom: 0;
      }

      .section-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--ct1);
        margin-bottom: 12px;
        padding-left: 8px;
        position: relative;

        &::before {
          content: "";
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          width: 3px;
          height: 16px;
          background: var(--bd);
          border-radius: 4px;
        }
      }

      .el-table {
        border-radius: 8px;
        overflow: hidden;

        :deep(.el-table__header) {
          background-color: var(--fl1);
        }

        :deep(.el-table__body) {
          tr:hover > td {
            background-color: var(--fl1);
          }
        }

        // 自适应列宽优化
        :deep(.el-table__header-wrapper),
        :deep(.el-table__body-wrapper) {
          overflow-x: auto;
        }

        :deep(.el-table__cell) {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          padding: 8px 12px;
        }

        // 时间列稍微宽一些
        :deep(.el-table__cell:has-text("时间")) {
          min-width: 140px;
        }

        // 备注列自适应
        :deep(.el-table__cell:has-text("备注")) {
          min-width: 80px;
          max-width: 200px;
        }

        // 修改原因列自适应
        :deep(.el-table__cell:has-text("修改原因")) {
          min-width: 120px;
          max-width: 300px;
        }
      }

      // 带按钮的单元格样式
      .cell-with-button {
        display: flex;
        align-items: center;
        gap: 4px;

        .info-button {
          padding: 0;
          min-height: auto;
          color: var(--ct2);

          &:hover {
            color: var(--bd);
          }
        }
      }

      // 带按钮的表头样式
      .header-with-button {
        display: flex;
        align-items: center;
        line-height: 22px;
        cursor: pointer;
        gap: 8px;
      }
    }
  }
</style>

<style>
  .custom-tooltip {
    max-width: 300px !important;
    white-space: pre-line !important;
    word-wrap: break-word !important;
    line-height: 1.4 !important;
  }
</style>
